@charset "utf-8";
$colred: #f27274;
$colddd: #dddddd;
//  fe4c40
// fe664f
$blueColor: #63acfd;
$sendBlueColor: #338FFB;
$mainColor:#FA3232;
$colorRed: #f7564e;
$redColor:#FF586F;
$btnRedColor:#F55623;
$redLineColor: #FF4963;
$redFontColor:#EF4848;
$F6F6F6: #F6F6F6;
$tipColor:#d80303;
$color222: #222222;
$color333:#333;
$color999:#999;
$color666:#666;
$colorccc:#ccc;
$skRed:#c33a36;
$rpGreen:#16B92E;

$width:1200px;

$ftWeight:600;

$mainFontSize:16px;
$borderColor: #e2e2e2; // default border color
$lightborderColor:#dcdcdc;
$bgColor:#f6f6f6;
.f0_bg{
  background-color: $bgColor!important;
}
@mixin wh($w, $h){
  @include px2rem(width, $w);
  @include px2rem(height, $h);
}
@mixin border($w, $s, $c){
  @include px2rem(border-width, $w);
  border-style: $s;
  border-color: $c;
}
@mixin border-r($w, $s, $c){
  @include px2rem(border-right-width, $w);
  border-right-style: $s;
  border-right-color: $c;
}
@mixin line-clamp(){
  display: -webkit-box;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
//
@mixin px2rem($property, $values,$baseline-rem:75) {
  $max: length($values);//返回$values列表的长度值
  $pxValues: '';
  $remValues: '';

  @for $i from 1 through $max {
    $value: (nth($values, $i));
    $remValues: #{$remValues + $value/$baseline-rem}rem;

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  }

//  #{$property}: $pxValues;
  #{$property}: $remValues;
}
@mixin lh($h, $lh){
  @include px2rem(height, $h);
  @include px2rem(line-height, $lh);
}
@mixin _icondb($w, $h, $mt){
  @include px2rem(width, $w);
  @include px2rem(height, $h);
  vertical-align: middle;
  display: block;
  margin: 0 auto;
  @include px2rem(margin-top, $mt);
  background: {
    repeat: no-repeat;
    position: center center;
    size: contain;
  };
}

$legacy-support-for-ie: false !default;
// $filter:true !default;
//
//
//  //
// @mixin last_w($all:$width,$first:0){
//   width: $all - $first;
// }
//
// @mixin w_minus($key,$value1:0,$value2:0,$rate:1){
//   #{$key}:($value1 - $value2)/$rate;
// }
//
// // 总的width ,height; 根据padding计算出相应的值，padding是个数据
// // 引用 @include wh_padding(*px, *px, *px|*px *px|*px *px *px|*px *px *px *px);
// //
//
// @mixin wh_padding($width, $height, $padding){
//     $len: length($padding);
//
//     @if $len == 1 {
//         height: $height - 2 * nth($padding,1);
//         width: $width - 2 * nth($padding,1);
//         padding: $padding;
//     } @else if length($padding) == 2 {
//         height: $height - 2 * nth($padding,1);
//         width: $width - 2 * nth($padding,2);
//         padding: $padding;
//     } @else if length($padding) == 3{
//         height: $height - nth($padding,1) - nth($padding,3);
//         width: $width - 2 * nth($padding,2);
//         padding: $padding;
//     } @else if length($padding) == 4{
//         height: $height - nth($padding,1) - nth($padding,3);
//         width: $width - nth($padding,2) - nth($padding,4);
//         padding: $padding;
//     }
// }
//
// //
// //  透明度  小数;
// //
//
// @mixin opacity($opacity:50) {
//   opacity: $opacity / 100;
//   @if $filter{
//     filter: alpha(opacity=$opacity);
//   }
// }
// //
// //  背景透明度处理
// //  $color 可以是数组RGB,也可以是#ABCDEF---十六进制的表示
// //  $op 必须是小数
//

//
// //
// //  css3 不同浏览器兼容处理
// //
//
@mixin c3($key , $value){
    -webkit-#{$key}: $value;
    -moz-#{$key}: $value;
    -o-#{$key}: $value;
    #{$key}: $value;
}
.boradius{
  @include px2rem(border-radius, 5);
}
//
// //
// // display-inline 兼容IE6,IE7
// // 提供一个跨浏览器的方法来实现`display:inline-block
// //
// //@mixin inline_box_p{
// //  font-size: 0;
// //}
$inline-block-alignment: middle !default;//设置一个默认的对齐方式
@mixin display-inline($alignment: $inline-block-alignment) {
  display: inline-block;
  @if $alignment and $alignment != none {
    vertical-align: $alignment;
  }
  @if $legacy-support-for-ie {
    *vertical-align: auto;
    zoom: 1;
    *display: inline;
  }
}
//
// %display-inline{
//   @include display-inline();
// }
// //水平居中 ---单个元素使用
// @mixin horizontal-center {
//   margin-left: auto;
//   margin-right: auto;
// }
// //水平居中 ---多个元素使用
// %horizontal-center {
//   @include horizontal-center;
// }
// //
// //  float 解决IE6下双margin
// //
//
@mixin float($side:left){
  float: unquote($side);
  @if $legacy-support-for-ie {
    _display:inline;
  }
}
// //左浮动
//
// @mixin pull-left{
//   @include float(left);
// }
//
%pull-left {
  @include float(left);
}
//
//
// //右浮动
//
// @mixin pull-right{
//   @include float(right);
// }
//
// %pull-right {
//   @include float(right);
// }
//
// //
// // reset-float 重置掉float
// //
// @mixin reset-float($display:block){
//     float:none;
//     display: $display;
// }
//
// //清除浮动clearfix
@mixin clearfix {
  @if $legacy-support-for-ie {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
    overflow: hidden;
  }
}

%clearfix {
  @include clearfix;
}
//
// //1.浏览器和屏幕阅读器都隐藏元素
//
// @mixin hidden {
//   display: none !important;
//   visibility: hidden;
// }
//
// %hidden {
//   @include hidden;
// }
//
// //2.仅浏览器隐藏，屏幕阅读器不被隐藏
//
// @mixin visuallyhidden {
//   @if $legacy-support-for-ie {
//     clip: rect(0,0,0,0);
//   }
//   border: 0;
//   clip: rect(0 0 0 0);
//   height: 1px;
//   margin: -1px;
//   overflow: hidden;
//   padding: 0;
//   position: absolute;
//   width: 1px;
//
//   ////扩展了`.visuallyhidden`，充许`.focusable`元素通过键盘获取
//   &.focusable:active,
//   &.focusable:focus {
//     clip: auto;
//     height: auto;
//     margin: 0;
//     overflow: visible;
//     position: static;
//     width: auto;
//   }
// }
//
// %visuallyhidden {
//   @include visuallyhidden;
// }
//
// //3.隐藏元素，但布局中占有空间
//
// @mixin invisible {
//   visibility: hidden;
// }
//
// %invisible {
//   @include invisible;
// }
// //截取文本text-overflow  单行文本
@mixin singleline-ellipsis($substract:0){//`$substract`单位为%
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100% - $substract;
}
//
// %singleline-ellipsis {
//   @include singleline-ellipsis;
// }
//
//
// //多行
@mixin lines-ellipsis($num){
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $num;
  -webkit-box-orient: vertical;
}
// //禁用样式disabled
// @mixin disabled($bgColor: #e6e6e6,$textColor:#ababab){
//   background-color: $bgColor !important;
//   color: $textColor !important;
//   cursor: not-allowed !important;
// }
//
//
// //最小高度min-height
// @mixin min-height($height){
//   min-height: $height;
//   height: auto !important;
//   @if $legacy-support-for-ie {
//     _height: $height;
//   }
// }
//
// //absolut center center
// @mixin absolute_center($w,$h){
//   position: absolute;
//   left: 50%;
//   top: 50%;
//   width: $w;
//   height: $h;
//   margin-top: -($h/2);
//   margin-left: -($w/2);
// }
//
// //
// //  css3特效，渐变背景色
// //  $direction 方向：left|top|right|bottom|angle|数组 type,angle
// //  $colors 颜色数组 ---需要赋到一个变量里
// //
//
// @mixin bg-linear-gradient($colors, $diretion:top ){
//     @if length($colors) == 2{
//         $c1 : nth($colors,1);
//         $c2 : nth($colors,2);
//         background-color:mix($c1,$c2);
//         filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$c1}, endColorstr=#{$c2});
//         -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#{$c1}, endColorstr=#{$c2})";
//         @if $diretion == top{
//             background: -webkit-gradient(linear, left top, left bottom, from($c1), to($c2));
//         } @else if $diretion == left{
//             background: -webkit-gradient(linear, left top, right top, from($c1), to($c2));
//         } @else if $diretion == lefttop{
//             background: -webkit-gradient(linear, left top, right bottom, from($c1), to($c2));
//         } @else if $diretion == righttop{
//             background: -webkit-gradient(linear, right top, left bottom, from($c1), to($c2));
//         }
//     }
//     background: -webkit-linear-gradient($diretion, $colors);
//     background: -moz-linear-gradient($diretion, $colors);
//     background: -ms-linear-gradient($diretion, $colors);
//     background: -o-linear-gradient($diretion, $colors);
//     background: linear-gradient($diretion, $colors);
//
// }
//
//
//
//
// //
// //  三角形 -e正三角形， -r直三角形
// //  $name: up-e, down-e, left-e, right-e ; up-r-l, up-r-r, down-e-l, down-e-r;
// //  $width: 三角形的宽，计算是会/2，半个border在值
// //  $height: 三角形的高
// //  $line: solid dotted ...
// //  $bgColor: IE6下的背景色，只用于IE6
// //  带边框的三角形可以用两个三角定位来实现
//
// @mixin triangle( $name, $width, $height, $line: solid, $color: #333, $bgColor:#fff){
//
//     width: 0;
//     height: 0;
//     _zoom:1;
//     overflow: hidden;
//     display:inline-block;
//     $border-w: $width / 2 solid transparent;
//     $border-h: $height / 2 solid transparent;
//     $border-w6: $width / 2 solid $bgColor;
//     $border-h6: $height / 2 solid $bgColor;
//     $border-fw: $width $line $color;
//     $border-fh: $height $line $color;
//     $border-hw: $width / 2 $line $color;
//     $border-hh: $height / 2 $line $color;
//
//     @if $name == up-e {  //正，上三角
//         border-top: 0;
//         border-left: $border-w;
//         border-right: $border-w;
//         _border-left: $border-w6;
//         _border-right: $border-w6;
//         border-bottom: $border-fh;
//     } @else if $name == down-e {    //正，下三角
//         border-top: $border-fh;
//         border-left: $border-w;
//         border-right: $border-w;
//         _border-left: $border-w6;
//         _border-right: $border-w6;      border-bottom: 0;
//     } @else if $name == left-e {    //正，左三角
//         border-top: $border-h;
//         border-left: 0;
//         border-right: $border-fw;
//         border-bottom: $border-h;
//         _border-top: $border-h6;
//         _border-bottom: $border-h6;
//     } @else if $name == right-e {   //正，右三角
//         border-top: $border-h;
//         border-left: $border-fw;
//         border-right:0;
//         border-bottom: $border-h;
//         _border-top: $border-h6;
//         _border-bottom: $border-h6;
//     } @else if $name == up-r-l { //直 左 上三角
//         border-top: $border-h;
//         border-left: $border-w;
//         border-right: $border-hw;
//         border-bottom: $border-hh;
//     } @else if $name == up-r-r { //直 右 上三角
//         border-top: $border-h;
//         border-left: $border-hw;
//         border-right: $border-w;
//         border-bottom: $border-hh;
//     } @else if $name == down-r-l { //直 左 下三角
//         border-top: $border-hh;
//         border-left: $border-w;
//         border-right: $border-hw;
//         border-bottom: $border-h;
//     } @else if $name == down-r-r { //直 左 下三角
//         border-top: $border-hh;
//         border-left: $border-hw;
//         border-right: $border-w;
//         border-bottom: $border-h;
//     }
// }
//
// //
// //  变灰
// //
//
// @mixin gray{
//     filter:gray;
//     -o-filter:grayscale(1);
//     -ms-filter:grayscale(1);
//     -moz-filter:grayscale(100%);
//     -webkit-filter:grayscale(100%);
//     filter:url("#grayscale");
//     filter:grayscale(100%);
// }
//
// //
// //  正常
// //
//
// @mixin normal{
//     filter:none;
//     -o-filter:grayscale(0);
//     -ms-filter:grayscale(0);
//     -moz-filter:grayscale(0);
//     -webkit-filter:grayscale(0);
//     filter:grayscale(0);
// }
//
// //
// //  圆角设置，$direction选填，all|top|right|bottom|left|right|top-left|top-right|bottom-right|bottom-left
// //  domo: @include border-radius(10px, top left);
// //
//
// @mixin border-radius($size, $direction:all){
//     @if $direction == all{
//         border-radius:$size;
//     } @else if length($direction) == 2 {
//         border-#{nth($direction,1)}-#{nth($direction,2)}-radius:$size;
//     }
//     @else if $direction == top or $direction == bottom{
//         border-#{$direction}-left-radius:$size;
//         border-#{$direction}-right-radius:$size;
//     } @else if $direction == right or $direction == left{
//         border-top-#{$direction}-radius:$size;
//         border-bottom-#{$direction}-radius:$size;
//     }
// }
//
//
// @mixin line_height($height,$line-height: $height){
//     height: $height;
//     line-height: $line-height;
// }
//
// // btn
// // @include simple-btn;
// // @include simple-btn;
// // @include simple-btn(true);
// // @include simple-btn($bgColor:$green);
// $bgimg:false;
// @mixin base_btn($bgimg:$bgimg,$bgColor: $bgColor, $textColor:#fff,$fontSize:20px,$inlineblock:true){
//
//   cursor: pointer;
//   border:0 none;
//   outline: none;
//   text-align: center;
//   color: $textColor;
//   @if($inlineblock){
//     @include display-inline();
//   }
//   @if($bgimg){
//
//   }@else{
//     background-color: $bgColor;
//   }
//   font-size: $fontSize;
// }
//
//
// //display:flex
// @mixin display_flex($flex: flex){
//   display: -webkit-box;
//   display:-ms-flexbox;
//   display: -webkit-flex;
//   display: -moz-flex;
//   display: -o-flex;
//   display: flex;
//   -webkit-flex-wrap: wrap;
//   -ms-flex-wrap: wrap;
//   flex-wrap: wrap;
// }
// @mixin flex($num){
//   -webkit-box-flex: $num;
//   -webkit-flex: $num;
//   -ms-flex: $num;
//   flex: $num;
//   display: block;
//   position: relative;
//   -webkit-flex-basis: 0;
//   -ms-flex-preferred-size: 0;
//   flex-basis: 0;
//   //    max-width: 100%;
//   //    width: 0;
// }
//
// @mixin flex-cell($width) {
//   -webkit-flex-basis: $width;
//   -ms-flex-preferred-size: $width;
//   flex-basis: $width;
//   max-width: $width;
//   width: auto!important
// }
//
// @mixin default_bg($x:0,$y:0){
//   @extend %bgimg;
//   background-position:  $x $y;
// }
//
// @mixin sprite_bg($w,$h,$x:0,$y:0){
//   @if($w){
//     width: $w;
//   }
//   @if($h){
//     height: $h;
//   }
//   @include default_bg($x,$y);
// }
//
//

//
//
// //图片水平垂直居中
// //Picture horizontal vertical center
// @mixin pic_hor_ver_center($w,$h:$w){
//   width: $w;
//   height: $h;
//   border: 1px solid $borderColor;
//   text-align: center;
//   display: table;
//   position: relative;
//   overflow: hidden;
//   line-height: 0;
//   @extend %pull-left;
//   span{
//     width: $w;
//     height: $h;
//     display: table-cell;
//     vertical-align: middle;
//   }
//   img{
//     margin: 0 auto;
//     max-width: $w;
//     max-height: $h;
//   }
// }
//
// // 640 *960
//@mixin px2rem($name,$px,$baseline-rem){
//  #{$name} : $px/$baseline-rem *1rem;
//}
// //@function pxTorem($px,$baseline-rem:64){
// //  @return $px / $baseline-rem * 1rem;
// //}
//
//
// //
// //@mixin px2rem($property,$px-values,$baseline-px:64,$support-for-ie:false){
// //  //Conver the baseline into rems
// //  $baseline-rem: $baseline-px / 1rem * 1;
// //  //Print the first line in pixel values
// //  @if $support-for-ie {
// //    #{$property}: $px-values;
// //  }
// //  //if there is only one (numeric) value, return the property/value line for it.
// //  @if type-of($px-values) == "number"{
// //    #{$property}: $px-values / $baseline-rem;
// //  }
// //  @else {
// //    //Create an empty list that we can dump values into
// //    $rem-values:();
// //    @each $value in $px-values{
// //      // If the value is zero or not a number, return it
// //      @if $value == 0 or type-of($value) != "number"{
// //        $rem-values: append($rem-values, $value / $baseline-rem);
// //      }
// //    }
// //    // Return the property and its list of converted values
// //    #{$property}: $rem-values;
// //  }
// //}
//
 @mixin bg_opacity($color, $op){

     @if length($color) == 1{    // input color in 16
         background:$color;
         filter:alpha(opacity = $op *100);
         background:rgba($color,$op);
     }

     @else if length($color) == 3{   // input color in RGB
         background:rgb(nth($color,1),nth($color,2),nth($color,3));
         filter:alpha(opacity = $op *100);
         background:rgba(nth($color,1),nth($color,2),nth($color,3),$op);

     }
 }
//  fe4c40

// //任何手机屏幕上px的统一
// //px2px(font-size, 32);
@mixin px2px($name,$px){
  #{$name}:round($px/2)*1px;
  [data-dpr = "2"] &{
    #{$name}:$px*1px;
  }
  [data-dpr = "2.5"] &{
    #{$name}:round($px*2.5/2)*1px;
  }

  [data-dpr = "2.75"] &{
    #{$name}:round($px*2.75/2)*1px;
  }

  [data-dpr = "3"] &{
    #{$name}:round($px*3/2)*1px;
  }
  [data-dpr = "4"] &{
    #{$name}:round($px*2)*1px;
  }
}

@mixin font-dpr($px){
  @include  px2px(font-size,$px)
}
